<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Playground</title>
    <style type="text/css">
        .main9009 {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .clear {
            clear: both;
        }

        .toolbar9009 {
            width: 100%;
            height: 50px;
            background-color: aquamarine;
            line-height:50px;
        }

        .main9009>div {
            width: 45%;
            display: block;
        }
    </style>
    <script type="text/javascript">
        function view() {
            var dv = document.createElement("div")
            dv.innerHTML = document.getElementById('code9009').value
            var script = document.createElement("script");  //创建一个script标签
            script.type = "text/javascript";
            script.text = dv.getElementsByTagName("script")[0].text
            document.body.appendChild(script)
            document.getElementById("view9009").innerHTML = dv.innerHTML
        }
    </script>
</head>

<body>
    <div class="toolbar9009 clear">
        <button onclick="view()">run web playground</button>
    </div>
    <div class="main9009">

        <div class="left">

            <textarea name="" id="code9009" style="width: 100%;min-height: 700px;">
<style> 

</style>
<script>
function al(){
alert(1)}

</script>

<button onclick="al()">do it</button>
            </textarea>
        </div>
        <div class="right" id="view9009">
            ...
        </div>
    </div>

</body>

</html>